<template>
  <div>
    <v-top></v-top>
    <div style='box-sizing: border-box;background-color: #C20C0C; height: 5px;'></div>
    <v-module>
      <!--    搜索框-->
<slot>
<div style='box-sizing: border-box;padding: 40px'>
  <div class='search'>
    <input @keyup.enter='search' type='text' v-model='name'>
    <a @click='search' href='javascript:;' title='搜索'></a>
  </div>
  <div class='find'>
    搜索“{{ this.$store.state.search.searchName }}”，找到 <em>{{ $store.state.search.songCount}}</em>个{{this.$store.state.search.searchlist}}
  </div>
  <div class='list'>
    <ul>
      <li>
        <router-link to='song'>歌曲</router-link>
      </li>

      <li>
        <router-link to='sing'>歌手</router-link>
      </li>

      <li>
        <router-link to='album'>专辑</router-link>
      </li>

      <li>
        <router-link to='video'>视频</router-link>
      </li>

      <li>
        <router-link to='words'>歌词</router-link>
      </li>

      <li>
        <router-link to='list'>歌单</router-link>
      </li>

      <li>
        <router-link to='anchor'>声音主播</router-link>
      </li>

      <li>
        <router-link to='user'>用户</router-link>
      </li>
    </ul>
  </div>

  <router-view></router-view>
</div>
</slot>
    </v-module>
    <v-footer></v-footer>
  </div>
</template>

<script>
import Top from '@/views/Top/Top'
import module from '@/views/Module/module'
import config from '@/network/config'
import axios from 'axios'
import moment from 'moment'
import footer from '@/views/Footer/Footer'

export default {
  name: 'Search',
  components: {
    'v-top': Top,
    'v-module': module,
    'v-footer':footer
  },
  data() {
    return {
      cur: 0,
      url: config.url,
      name: '林俊杰',
      list: [],
      songtime:[],//歌曲时间
      length:[],
      songCount:0
    }
  },
  methods: {
    next(index) {
      this.cur = index
    },
    //搜索歌曲
    async search() {
      console.log(this.name)
      this.$store.commit('search/getSearchName',this.name)
      // let data = await axios.get(`${this.url}/search?keywords=${this.name}`)
      // var list = data.data.result.songs;
      // this.list = list;
      // var newlist = [];
      // var time = [];
      // for (let i = 0; i < list.length ; i++) {
      //   newlist.push(list[i])
      // }
      // this.songCount = data.data.result.songCount
      // this.$store.commit('search/getsongCount',data.data.result.songCount)  //多少条歌曲传递到 vuex
      // this.$store.commit('search/getSearch', newlist)
      // this.$store.commit('search/getSearchName', this.name)

    }
  },
  created(){
    this.$store.commit('search/getsongCount',this.songCount ) 
  }
}
</script>

<style scoped>

.first {
  background-position: left -90px !important;
  z-index: 21;
  box-sizing: border-box;
  border-right: 1px solid #CCCCCC !important;
}

.list ul a {
  font-size: 14px;
  height: 39px;
  width: 100%;
  display: block;
  background: url("../../assets/images/tab.png");
  text-align: center;
  line-height: 39px;
  color: #333333;
}

.list ul li {
  height: 100%;
  width: 112px;
  position: relative;
}

.list ul a:hover {
  background-position: -5px -45px;
  text-decoration: none;
}

.list ul {
  height: 39px;
  border: 1px solid #ccc;
  border-width: 0 1px;
  background: url("../../assets/images/tab.png") 0 0;
  background-repeat: repeat-x;
  display: flex;
  align-items: center;
}

/*操作列表*/


.find {
  margin: 28px 0 17px;
  color: #999;
  font-size: 12px;
}

em {
  font-style: normal;
  color: #c20c0c;
}

.search input {
  float: left;
  width: 320px;
  height: 17px;
  margin: 12px 0 0 20px;
  padding: 0;
  background: #fff;
  border: none;
  outline: none;
}

.search a {
  float: right;
  width: 50px;
  height: 40px;
  text-indent: -9999px;
  background: url("../../assets/images/sprite.png") 110px 0;
}

.search a:hover {
  background-position: -430px 0 !important;
  text-decoration: none;
}

.search {
  width: 420px;
  height: 40px;
  margin: 0 auto;
  background: url("../../assets/images/sprite.png") 0 0;
  z-index: 10;

}
</style>